Getting Started with React Development with the React Suite Library — Flex Order, Grid Layout, and Container Layout

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Flex Order

We can change the order of flexbox items with the order prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid>
        <FlexboxGrid.Item colspan={4} order={4}>
          order={4}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4} order={3}>
          order={3}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4} order={2}>
          order={2}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4} order={1}>
          order={1}
        </FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

We should see them displayed according to their order value from left to right.

Also, we can set the componentClass to Col to make the flexbox items responsive:

import React from "react";
import { FlexboxGrid, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid justify="space-around">
        <FlexboxGrid.Item componentClass={Col} colspan={24} md={6}>
          colspan={24} md={6}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item componentClass={Col} colspan={24} md={6}>
          colspan={24} md={6}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item componentClass={Col} colspan={24} md={6} smHidden>
          colspan={24} md={6} smHidden
        </FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

Container

The Container component lets us add a container layout into our React app.

For instance, we can write:

import React from "react";
import { Container, Header, Content, Footer, Sidebar } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Container>
    </div>
  );
}

to add a container layout.

We have the Header , Content , and Footer components to add those to our layout.

Also, we can add a sidebar with the Sidebar component:

import React from "react";
import { Container, Header, Content, Footer, Sidebar } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Header>Header</Header>
        <Container>
          <Content>Content</Content>
          <Sidebar>Sidebar</Sidebar>
        </Container>
        <Footer>Footer</Footer>
      </Container>
    </div>
  );
}

We can add a Navbar to the Header to add navigation:

import React from "react";
import {
  Container,
  Header,
  Content,
  Footer,
  Sidebar,
  Navbar,
  Nav,
  Icon,
  Dropdown
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Header>
          <Navbar appearance="inverse">
            <Navbar.Body>
              <Nav>
                <Nav.Item icon={<Icon icon="home" />}>Home</Nav.Item>
                <Nav.Item>News</Nav.Item>
                <Nav.Item>Products</Nav.Item>
                <Dropdown title="About">
                  <Dropdown.Item>Company</Dropdown.Item>
                  <Dropdown.Item>Team</Dropdown.Item>
                </Dropdown>
              </Nav>
              <Nav pullRight>
                <Nav.Item icon={<Icon icon="cog" />}>Settings</Nav.Item>
              </Nav>
            </Navbar.Body>
          </Navbar>
        </Header>
        <Container>
          <Content>Content</Content>
        </Container>
        <Footer>Footer</Footer>
      </Container>
    </div>
  );
}

Conclusion

We can change the order of flex items, add a grid layout, and add a container layout into our React app with React Suite.